{% extends "baseUser.html" %}

{% block head %}
	{{ super() }}
    <link href='/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.css' rel='stylesheet' />
    <link href='/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />

    <style type="text/css">
      #map-canvas { height: 400px; width: 100%; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO_9iJkPYfNR2kqQxcJKDQeDuKLnoxDT8&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.50, -58.50),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
{% endblock %}

{% block userData %}

	<div class="page-header">
		<div class="row">
			<div class="col-md-10">
				<h1>Competencias</h1>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-6">		
				<div class="panel-group" id="compe_usuario">
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color:lightgreen;">
							<h6 class="panel-title"><b>Tus proximas competencias</b></h6>
						</div>
						<div id="compe_usu00" class="panel-collapse collapse">
							<div class="panel-body">
							</div>
						</div>
					</div>								
				{% for competencia in competencias_del_usuario %}
					<div class="panel panel-default">
						<div class="panel-heading">
							<h6 class="panel-title">
								<a data-toggle="collapse" data-parent="#compe_usuario" href="#compe_usu{{ competencia.id }}">
									{{ competencia.fecha }} <br> {{ competencia.nombre }}
								</a>
							</h6>
						</div>
						<div id="compe_usu{{ competencia.id }}" class="panel-collapse collapse in">
							<div class="panel-body">
								Deporte: {{ get_compet_deporte(competencia.deporte_id) }} <br>
								{{ competencia.introduccion }}
							</div>
						</div>
					</div>								
				{% endfor %}				
				</div>
			
				<hr>
				<div class="row">
					<div class="col-md-12 ">
						<h4>Que estan haciendo tus amigos?</h4>	
						</table>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<table class="table table-striped">
							<tr><td>01/12/2013</td><td>Alfredo Zapata participara en la Maraton La fuerza</td></tr>
							<tr><td>08/11/2013</td><td>Roberto Martino anduvo en bicicleta en el Rosedal</td></tr>
							<tr><td>02/11/2013</td><td>Marcela Repetto corrio en los bosques de Palermo</td></tr>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel-group" id="compe_recomen">
					<div class="panel panel-default">
						<div class="panel-heading" style="background-color:lightblue;">
							<h6 class="panel-title"><b>Recomendadas</b></h6>
						</div>
						<div id="compe_recomen00" class="panel-collapse collapse">
							<div class="panel-body">
							</div>
						</div>
					</div>								
				{% for competencia in competencias_del_usuario %}
					<div class="panel panel-default">
						<div class="panel-heading">
							<h6 class="panel-title">
								<a data-toggle="collapse" data-parent="#compe_recomen" href="#compe_recomen{{ competencia.id }}">
									<div class="row">
										<div class="col-md-3"><h6>{{ competencia.fecha }}</h6></div>
										<div class="col-md-5"></div>
										<div class="col-md-4"><button type="button" id="detalle_compe{{ competencia.id }}" class="btn btn-warning btn-block">Inscribirse</button></div>
									</div>
									<div class="row">
										<div class="col-md-12"><h5><b> {{ competencia.nombre }}</b></h5></div>
									</div>	
								</a>
							</h6>
						</div>
						<div id="compe_recomen{{ competencia.id }}" class="panel-collapse collapse in">
							<div class="panel-body">
								Deporte: {{ get_compet_deporte(competencia.deporte_id) }} <br>
								{{ competencia.introduccion }}
							</div>
						</div>
					</div>								
				{% endfor %}				
				</div>
			
				<hr>
				<div class="row">
					<div class="col-md-12 box">
						<div class="row">
							<div class="col-md-9 ">
								<h3>Detalle Competencia</h3>	
							</div>	
							<div class="col-md-3 ">
								<button type="button" class="btn btn-success btn-block">Inscribirse</button>
							</div>	
						</div>
						<hr>
						<div class="row">
							<div class="col-md-12">
								<p>
									Esto es la introduccion a una competencia<br>
									
									Luego los datos de ubicacion.<br>
									
									A continuacion, estan los detalles de la competencia.
									XXXFDSFDSFDSFDSAFDSAFDSAF FDSAFDS DFSA FDAS FDSA FDSA FDSA DSA
									GDAVCX DSAF DSAF DASF DSAF ADFD ASGDAS DSGA FDSA FDSGDSA  EWR EW FDSFSA FD.<br>
								</p>
							</div>
						</div>
						<hr>
						<div class="row">
							<div class="col-md-12">
								<div id="map-canvas"/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-warning btn-block">PUBLICIDAD DE SPONSORS</button>	
			</div>
		</div>
	</div>

{% endblock %}
	
{% block js_footer %}
	{{ super() }}

    <script src="/static/demo/competenciasUser_data.js"></script>

{% endblock %}

